<template>
	<view class="wm">
		<div class="wm_text" ref="wm_text" v-bind:style="{'width':100/parseInt(col)+'%','height':100/parseInt(row)+'%'}" v-for="(item,index) in row*col" :key="index">
			<div class="text" v-bind:style="{'opacity':opacity,'color':color,'transform':'rotate('+rotate+')'}">{{text}}</div> 
		</div>
	</view>
</template>
<script>
	export default{
		data(){
			return{
			}
		},
		props:{
			text:{
				type:String,
				default:"我是水印"
			},
			opacity:{
				type:[Number,String],
				default:0.05
			},
			rotate:{
				type:String,
				default:"-30deg"
			},
			color:{
				type:String,
				default:"black"
			},
			row:{
				type:[Number,String],
				default:3
			},
			col:{
				type:[Number,String],
				default:7
			}
		}
	}
</script>

<style lang="scss" scoped>
.wm{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: column;
	justify-content: space-around;
	.wm_text{
		width: 33.33%;
		height: 14.28%;
		display: flex;
		align-items: center;
		justify-content: center;
		.text{
			// transform: rotate(0deg);
		}
		color: black;
		opacity: 1;
	}
}
</style>
